<template>
  <view class="tabbar-box">
    <u-tabbar :value="currentTab" :zIndex="1000" activeColor="#4ABF78" inactiveColor="#333333" :border="false"
      :fixed="true" :placeholder="false" :safeAreaInsetBottom="true">
      <u-tabbar-item v-for="(item, i) in tabbarList" :key="item.name" :text="item.text" :name="item.name"
        @click="handTab(item)" :dot="i == 3 && messageDot != 0" :badgeStyle="'top: 0px;right:2px;'">
        <image class="bar_img" slot='active-icon' v-if="item.type == 0" :src="item.icon_select"></image>
        <image class="bar_img" slot='inactive-icon' v-if="item.type == 0" :src="item.icon"></image>
        <image class="find_icon select_img" slot='active-icon' v-if="item.type == 1" :src="item.icon_select"></image>
        <image class="find_icon select_img" slot='inactive-icon' v-if="item.type == 1" :src="item.icon_select"></image>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>
// import { mapGetters } from 'vuex'
export default {
  props: {

    currentTab: {
      type: String,
      default: 'home'
    }
  },
  computed: {
  },
  watch: {

  },
  created() {

  },
  options: { styleIsolation: 'shared' },
  data() {
    return {
      value2: 1,
      showPage: false,
      tabbarList: [{
        "pagePath": "/pages/home/index",
        "text": "首页",
        "icon_select": "https://static.shuoshijiankang.com/images/tabbar/home_active.png",
        "icon": "https://static.shuoshijiankang.com/images/tabbar/home.png",
        "type": 0,
        "name": 'home'
      },
      {
        "pagePath": "/pages/shop/index",
        "text": "商城",
        "icon_select": "https://static.shuoshijiankang.com/images/tabbar/ask_active.png",
        "icon": "https://static.shuoshijiankang.com/images/tabbar/ask.png",
        "type": 0,
        "name": 'shop'
      },
      {
        "pagePath": "/pages/pk/index",
        "text": "PK",
        "icon_select": "https://static.shuoshijiankang.com/images/tabbar/inquiry_active.png",
        "icon": "https://static.shuoshijiankang.com/images/tabbar/inquiry.png",
        "type": 0,
        "name": 'pk'
      },
      {
        "pagePath": "/pages/userCenter/index",
        "text": "个人中心",
        "icon_select": "https://static.shuoshijiankang.com/images/tabbar/my_active.png",
        "icon": "https://static.shuoshijiankang.com/images/tabbar/my.png",
        "type": 0,
        "name": 'userCenter'
      }
      ]
    };
  },

  methods: {
    handTab(e) {
      console.log(e)
      if (e.name == 'calendarRecord') {
        uni.redirectTo({
          url: e.pagePath
        })
      } else {
        uni.switchTab({
          url: e.pagePath
        })
      }

    }
  }
}
</script>


<style lang="scss" scoped>
::v-deep .u-tabbar__content__item-wrapper {
  height: 120rpx !important;
  box-shadow: 0px -4rpx 15rpx 0px rgba(0, 0, 0, 0.03);
}

::v-deep .u-badge--dot {
  width: 20rpx !important;
  height: 20rpx !important;
  background: #ff3b30 !important;
  border-radius: 50%;
  box-shadow: 0px -2px 7.5px 0px rgba(0, 0, 0, 0.03) !important;
  right: 23px !important;
  border: 2rpx solid #ffffff;
}

::v-deep .u-tabbar-item__text {
  margin-top: 9rpx;
}

::v-deep .u-tabbar-item {
  &:nth-of-type(3) {
    .u-tabbar-item__text {
      margin-top: 0;
    }
  }
}

.bar_img {
  width: 46rpx;
  height: 46rpx;
}

.find_icon {
  width: 110rpx;
  height: 110rpx;
  margin-top: -56rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0px -4px 15rpx 0px rgba(0, 0, 0, 0.03);
  animation: tabbar-item-button-click 0.2s forwards 1;

  /* 点击动画 start */

  @keyframes tabbar-item-button-click {
    from {
      transform: scale(0.5);
    }

    to {
      transform: scale(1);
    }
  }
}
</style>
